<template>
  <div class="btns">
    <el-button v-if="showBtn" @click="handleClick" v-bind="$attrs">
      <slot>切换</slot>
    </el-button>
    <el-dialog class="d1" title="切换摄像头" :visible.sync="visible" append-to-body width="700px">
      <div class="search">
        <el-input v-model="searchVal" size="mini" placeholder="模糊搜索摄像头名称"></el-input>
        <el-button style="margin-left: 10px;" size="mini" type="primary" @click="handleSearch">搜索</el-button>
      </div>
      <el-table ref="table" size="mini" stripe :data="list" :height="300" v-loading="loading">
        <!-- <el-table-column width="50" align="center">
          <template scope="scope">
            <el-radio class="radio" v-model="selected" :label="scope.row.cameraId">{{''}}</el-radio>
          </template>
        </el-table-column> -->
        <el-table-column prop="device.deviceName" label="摄像头名" width="120" align="center"></el-table-column>
        <el-table-column prop="device.number" label="摄像头编码" min-width="80" align="center"></el-table-column>
        <el-table-column prop="device.description" label="摄像头描述" min-width="120" align="center"></el-table-column>
        <el-table-column label="操作" min-width="120" align="center">
          <template scope="scope">
            <el-button @click="handleSubmit(scope.row.cameraId)" v-bind="$attrs">切换</el-button>
            <el-button @click="deleteDevice(scope.row.cameraId, scope.row.device.deviceName)" v-bind="$attrs" v-hasPermi="['slope:camera:remove']">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="footer">
        <el-button size="small" @click="visible=false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import send from '../sendMsg';
  import { delCamera } from '@/api/page/monitoring';

  /* 添加编辑店铺 */
  export default {
    components: {},
    props: {
      showBtn: {
        type: Boolean,
        default: true
      },
      edit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        loading: false,
        visible: false,
        selected: false,
        searchVal: "",
        list: []
      };
    },
    methods: {
      /**
       * 删除摄像头
       * @param id 摄像头id
       * @param name 摄像头名字
       */
      deleteDevice(id, name) {
        let self = this;
        self.$confirm( "确认要删除  " + name + "  摄像头吗?", "警告", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
          })
          .then(function() {
            delCamera(id);
          })
          .then(() => {
            self.$message({
              type: 'success',
              message: '已删除'
            });
            let index = self.list.findIndex( e => {
              if (e.cameraId == id) {
                return true;
              }
            })
            // self.list.splice(index,1);
            self.$parent.$parent.$parent.cameraList.splice(index,1);
          })
          .catch(function() {
            self.$message({
              type: 'info',
              message: '已取消删除'
            });
        });
      },
      handleSearch() {
        let self = this;
        self.loading = true;
        self.$parent.queryParams.device.deviceName = self.searchVal;
        self.$parent.initCameraList();
        send.$on("cameraList", data => {
          self.list = data;
          self.loading = false;
        })
      },
      handleClick() {
        this.visible = true;
        this.getData();
      },
      getData() {
        this.list = this.$parent.$parent.$parent.cameraList;
        console.log(this.list);
      },
      // handleSubmit() {
      //   this.visible = false;
      //   this.$emit("change", this.selected);

      // }
      handleSubmit(cameraId) {
        this.visible = false;
        this.$emit("change", cameraId);

      }
    }
  };
</script>
<style lang="scss" scoped>
  .search {
    .el-input {
      width: 180px;
    }

    padding-bottom: 10px;
  }

  .footer {
    text-align: right;
    padding: 10px 10px 0;
  }
</style>
